<script setup lang="ts">
import { ref } from 'vue';
import { MagnifyingGlassIcon, ArrowRightOnRectangleIcon } from '@heroicons/vue/24/outline';
import { useAuthStore } from '../stores/auth';

const searchQuery = ref('');
const authStore = useAuthStore();

const handleLogout = () => {
  authStore.logout();
};
</script>

<template>
  <nav class="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-lg border-b border-white/10">
    <div class="max-w-7xl mx-auto px-4">
      <div class="flex flex-col sm:flex-row justify-between items-center py-4 sm:py-3 gap-4">
        <div class="flex-shrink-0">
          <h1 class="text-xl font-semibold bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
            我的相册
          </h1>
        </div>
        <div class="flex items-center gap-4 w-full sm:w-auto">
          <div class="relative flex-1 sm:flex-initial sm:min-w-[240px]">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <MagnifyingGlassIcon class="h-5 w-5 text-gray-400" />
            </div>
            <input
              v-model="searchQuery"
              type="text"
              class="block w-full bg-white/5 border border-white/10 rounded-lg py-2 pl-10 pr-3 text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-white/20 focus:border-transparent"
              placeholder="搜索照片..."
            />
          </div>
          <button
            @click="handleLogout"
            class="flex items-center gap-2 px-4 py-2 rounded-lg bg-white/5 hover:bg-white/10 transition-colors whitespace-nowrap"
          >
            <ArrowRightOnRectangleIcon class="h-5 w-5" />
            <span class="hidden sm:inline">退出登录</span>
          </button>
        </div>
      </div>
    </div>
  </nav>
</template>

<style scoped>
nav {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
</style>